<template>
  <div>
    <div class="fun">
    <el-input
      class="w-50 m-2"
      placeholder="请输入菜单名"
      :suffix-icon="'Search'"
    />
      <el-button type="primary" :icon="'Search'">查询</el-button>
      <el-button type="primary" :icon="'Plus'">新增</el-button>
    </div>
    <el-table :data="roleDate" :stripe="true" style="width: 100%">
      <el-table-column prop="name" label="角色名称"/>
      <el-table-column prop="auth" label="权限"/>
      <el-table-column prop="createTime" label="创建时间" />
      <el-table-column label="操作" fixed="right" width="250px">
        <template #default>
          <el-button type="primary" size="small"><el-icon><View /></el-icon></el-button>
          <el-button type="warning" size="small"><el-icon><Edit /></el-icon></el-button>
          <el-button type="danger" size="small"><el-icon><Delete /></el-icon></el-button>
      </template>
      </el-table-column>
    </el-table>
    <el-pagination background v-model:page-size="pageSize" :page-sizes="[10,50,100,500]" layout="sizes, prev, pager, next, jumper, total" :total="1000" />
  </div>
</template>

<script setup>
import {reactive,ref} from 'vue'

const data = [
  {
    'name': '超级管理员',
    'auth': '所有',
    'createTime': '2016-05-03'
  },{
    'name': '部门管理员',
    'auth': '部门权限',
    'createTime': '2016-05-03',
  },{
    'name': '普通员工',
    'auth': '普通权限',
    'createTime': '2016-05-03',
  }
]
const roleDate = reactive(data)
const pageSize = ref(100)
</script>

<style lang="scss" scoped>
.fun{
  padding-left: 10px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  .el-input{
    width: 150px;
    margin-right: 8px;
  }
}
</style>
